import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:icooker/model/reommend_data.dart';

import '../pages/payer/jcchewievideo_player.dart';
import 'package:kasax/kasax.dart';

/// 视频缩略图
class VideoThumb extends StatelessWidget {
  final VideoInfoData videoInfo;

  const VideoThumb(this.videoInfo, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print("播放视频");

        /// 可用，效果不好
        // RouteUtils.push(context, FlutterIJKPlayerView(videoInfo));
        // RouteUtils.push(context, FlutterIJKFullscreenPlayerView(videoInfo));
        /// 可用，未能全屏
        // RouteUtils.push(context, JCVideoPlayer(videoInfo));
        RouteUtils.push(
            context,
            JCChewieVideoPlayer(
              videoUr: videoInfo.video!.vendorVideo!,
            ));
      },
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            child: AspectRatio(
              aspectRatio: 1 / 1,
              child: CachedNetworkImage(
                fit: BoxFit.cover,
                imageUrl: videoInfo.video!.img!,
                // 圆角效果实现
                imageBuilder: (context, imageprovider) => Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      image: DecorationImage(
                          image: imageprovider, fit: BoxFit.cover)),
                ),
                placeholder: (
                  BuildContext context,
                  String url,
                ) =>
                    Container(
                  color: Color(0xFFD6D6D6),
                  child: Center(
                    child: SizedBox(
                      width: 30,
                      height: 30,
                      child: CircularProgressIndicator(
                        color: Colors.blueGrey,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Container(
            child: Opacity(
                opacity: 0.3,
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.lightBlue,
                      borderRadius: BorderRadius.circular(10)),
                )),
          ),
          Container(
            child: Center(
              child: Icon(
                FontAwesomeIcons.video,
                color: Colors.white.withOpacity(0.75),
                size: 32,
              ),
            ),
          ),
          Positioned(
            child: Text(
              videoInfo.title!,
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
            bottom: 10,
            left: 10,
          )
        ],
      ),
    );
  }
}
